<template>
  <el-card shadow="hover">
    <el-table border :data="SkuArr" :row-class-name="tableRowClassName" highlight-current-row>
      <el-table-column type="index" label="序号" align="center" width="85px"></el-table-column>
      <el-table-column label="名称" prop="skuName"></el-table-column>
      <el-table-column label="描述" prop="skuDesc"></el-table-column>
      <el-table-column label="默认图片">
        <template #="{ row, $index }">
          <img :src="row.skuDefaultImg" alt="" style="width: 100; height: 100px;">
        </template>
      </el-table-column>
      <el-table-column label="重量" prop="weight"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column label="操作">
        <template #="{ row, $index }">
          <el-button :icon="row.isSale == 1 ? Bottom : Top" :type="row.isSal === 1 ? 'danger' : 'info'"
            @click="UpAndDown(row)"></el-button>
          <el-button :icon="Edit" type="primary" @click="EditHandele"></el-button>
          <el-button :icon="Promotion" type="primary" @click="DrawerHandle(row)"></el-button>
          <el-button :icon="Delete" type="primary" @click="deleteSKu(row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!-- 分页 -->
  <el-pagination @current-change="CurrentChange" @size-change="SizeChange" style="margin-top: 25px;"
    v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]" background
    layout="prev, pager, next,jumper,->,total, sizes," :total="total" />

  <!-- 场景2  抽屉 -->
  <el-drawer v-model="isActive" title="查看商品详情" :with-header="false">
    <!-- 商品名字 -->
    <el-divider style="background-color: blueviolet;" content-position="left" border-style="dashed">商品详情</el-divider>
    <el-row>
      <el-col :span="8">名称</el-col>
      <el-col :span="16">{{ skuDetail.skuName }}</el-col>
    </el-row>
    <!-- 商品描述 -->
    <el-divider style="background-color: blueviolet;" content-position="left" border-style="dashed">商品描述</el-divider>
    <el-row>
      <el-col :span="8">商品描述</el-col>
      <el-col :span="16">{{ skuDetail.skuDesc }}</el-col>
    </el-row>
    <!-- 商品价格 -->
    <el-divider style="background-color: blueviolet;" content-position="left" border-style="dashed">商品价格</el-divider>
    <el-row>
      <el-col :span="8">商品价格</el-col>
      <el-col :span="16" style="font-size: 22px;color:sienna">{{ skuDetail.price }}</el-col>
    </el-row>
    <!-- 平台属性 -->
    <el-divider style="background-color: blueviolet;" content-position="left" border-style="dashed">平台属性</el-divider>
    <el-row>
      <el-col :span="8">平台属性</el-col>
      <el-col :span="16">
        <el-tag v-for="item in skuDetail.skuAttrValueList"
          style="margin: 4px; background-color: aquamarine; color: black;">
          {{ item.attrName }}
        </el-tag>
      </el-col>
    </el-row>
    <!-- 销售属性 -->
    <el-divider style="background-color: blueviolet;" content-position="left" border-style="dashed">销售属性</el-divider>
    <el-row>
      <el-col :span="8">销售属性</el-col>
      <el-col :span="16">
        <el-tag v-for="item in skuDetail.skuSaleAttrValueList"
          style="margin: 4px; background-color: aquamarine; color: black;">
          {{ item.saleAttrName }}
        </el-tag>
      </el-col>
    </el-row>
    <!-- 商品图片 -->
    <el-divider style="background-color: blueviolet;" content-position="left" border-style="dashed">商品图片</el-divider>
    <el-row>
      <el-col :span="8">商品图片</el-col>
      <el-col :span="16">
        <!-- 轮播图 -->
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="item in skuDetail.skuImageList" :key="item">
            <img :src="item.imgUrl" alt="" style="width: 100%; width: 100%;">
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<script setup lang="ts">
// 组合式Api
import { ref, onMounted } from 'vue';
// 引入Element-plus图标
import { Plus, Delete, Top, Promotion, Edit, Bottom } from '@element-plus/icons-vue';
// 引入element信息提示
import { ElMessage } from 'element-plus';
// 引入请求函数
import { rerSkuList, reqSkuDelete, reqSkuOnsale, reqSkuCancelSale, reqSkuDetail } from '@/api/product/sku/index'
// 当前在第几页
let page = ref(1)
// 一页有几条数据
let pageSize = ref(5)
// 总页数
let total = ref(0)
// 控制抽屉显示与隐藏
let isActive = ref(false)
// 存放sku数据的空数组
let SkuArr = ref<any>([])
// 存放sku商品完整信息的初始值
let skuDetail = ref<any>({})
// 带状态的表格
const tableRowClassName = ({ row, rowIndex }: {
  row: number
  rowIndex: number
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}

// 获取sku列表的方法
let SkuGoodsList = async () => {
  // 发请求(携带page和pageSize参数)
  let reslut: any = await rerSkuList(page.value, pageSize.value)
  //存储sku列表的数组
  SkuArr.value = reslut.records
  // 存储总数total
  total.value = reslut.total
  console.log(reslut)
}
// 当页码发生变化
let CurrentChange = () => {
  SkuGoodsList()
}
// 分页下拉框发生变化的回调
let SizeChange = () => {
  SkuGoodsList()
}

// 组件挂载完毕
onMounted(() => {
  // 发请求获取sku列表数据
  SkuGoodsList()
})


// 上架与下架的回调
let UpAndDown = async (row: any) => {
  // 商品处于下架中,点击要上架
  if (row.isSale == 1) {
    await reqSkuCancelSale(row.id)
    ElMessage({
      type: 'success',
      message: '下架成功'
    })
    SkuGoodsList()
  } else {
    await reqSkuOnsale(row.id)
    ElMessage({
      type: 'success',
      message: '上架成功'
    })
    SkuGoodsList()
  }
}

// 编辑按钮的回调
let EditHandele = () => {
  ElMessage({
    type: 'success',
    message: '程序猿正在开发屌丝中!!!'
  })
}

// 点击查看详情的回调
let DrawerHandle = async (row: any) => {
  // 点击出现抽屉
  isActive.value = true
  // 发请求获取sku详情
  let reslut = await reqSkuDetail(row.id)
  // 存储sku详情的数据
  skuDetail.value = reslut
  console.log(reslut)
}

// 删除sku的回调
let deleteSKu = async (row: any) => {
  try {
    // 发请求删除sku(根据sku的id)
    await reqSkuDelete(row.id)
    ElMessage(({
      type: 'success',
      message: '删除成功!!'
    }))
    // 发请求获取最新数据
    SkuGoodsList()
  } catch (error) {
    ElMessage(({
      type: 'error',
      message: '删除失败'
    }))
  }
}


</script>

<script lang="ts">
export default {
  name: 'Sku'
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* 深度选择器写法1 >>>
                2. deep 一般服务于less
                3.v-dppe(选择器) 一般服务器sass
  
*/
>>>.el-carousel__button {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: rgb(219, 7, 131);
}
</style>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>